<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <title>播放器</title>
        <style>
            .rs{
                width: 90%;
                display:block;
            }
            .rs ul{
                clear:both;
                width: 100%;
                display:block;
            }
            .rs li{
                display:block;
                LIST-STYLE-TYPE:   none;
                float:left;
                margin: 3px 3px 0 0;
                overflow: hidden;
            }
            .t {
                width: 20%;
                overflow: hidden;
            }
            .ar {
                width: 20%;
                overflow: hidden;
            }
            .al {
                width: 20%;
                overflow: hidden;
            }
            .si {
                width: 5%;
                overflow: hidden;
            }
            .tt {
                width: 5%;
                overflow: hidden;
            }
            #flow_opt{
                background-color: #fff;
                border:2px double #000000;
                position:fixed;
                left:0px;
                top:0px;
                height:102px;
                width:100%;
            }
            #sliderbg{
                background : url('sldr2v_bg.gif') no-repeat;
                height: 120px;
                float:left;
            }
            .play{
                cursor: pointer;
                background: url('opt_blue.jpg');
                width: 102px;
                float: left;
                height: 102px;
            }
            .pause{
                background: url('opt_blue.jpg') no-repeat -104px 0px;
                display:block;
                width: 102px;
                float: left;
                cursor: pointer;
                height: 102px;
            }
            .mute{
                background: url('opt_blue.jpg') no-repeat -204px 0px;
                cursor: pointer;
                display:block;
                width: 102px;
                float: left;
                height: 102px;
            }
            #search{
                margin-top: 104px;
            }
        </style>
    </head>
    <body>
        <div id="flashContent"></div>
        <script language="javascript" src="swfobject.js"></script>
        <script language="javascript" src="prototype.js"></script>
        <script language="javascript" src="jsonp.js"></script>
        <script language="javascript" src="search.js"></script>
        <!-- Dependencies --> 
        <script src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script src="http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js"></script>

        <!-- Slider skin (optional) --> 
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/slider/assets/skins/sam/slider.css">

        <!-- Slider source file --> 
        <script src="http://yui.yahooapis.com/2.8.1/build/slider/slider-min.js"></script>

        <div id="flow_opt">
            <!--<a href="javascript:;" onclick="ajaxsearch.letsplay()">开启</a>-->
            <div id="playbtn" class="play" onclick="ajaxsearch.letsplay()"></div>
            <div class="mute" id="sound_btn" onclick="ajaxsearch.showvolumn()"></div>
        <div id="slider_control">
        <div id="sliderbg">
            <div id="sliderthumb"><img src="sldr2v_sl.gif"></div>
        </div>

            <!--<a href="javascript:;" onclick="ajaxsearch.letsplay()">暂停</a> -->
        </div>
    </div>
        <div>
            <div id="search">
                <h3>搜索:</h3>
                <input type="text" id="search_text" name="search_text" />
                <a href="javascript:;" onclick="ajaxsearch.do_search()">搜索</a>
            </div>
            <div id="result">
            </div>
        </div>
        <script language="javascript">
            window.onload=function(){
                /*FF和IE7可以通过position:fixed来定位，只有ie6需要动态设置高度.*/
                if (/MSIE (\d+\.\d+)/.test(navigator.userAgent)){ //test for MSIE x.x;
                    var ieversion=new Number(RegExp.$1);
                    if(ieversion==6)
                        FollowDiv.follow();
                }
            };

            FollowDiv = {
                follow : function(){
                    $('flow_opt').style.position="absolute";
                    window.onscroll=function(){
                        var f_top = FollowDiv._getScroll();
                        $('flow_opt').style.top=""+f_top+"";
                        ajaxsearch.showvolumn();
                    }
                },
                _getScroll : function(){
                    scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;;
                    return scrollTop;
                }
            }
            var slider;
             
            function sliderInit() {
                ajaxsearch.showvolumn(true);
                slider = YAHOO.widget.Slider.getVertSlider("sliderbg", "sliderthumb", 0, 100);
                slider.subscribe('change', function (newOffset) {
                    ajaxsearch.setVolumn(newOffset);
                        });

            }


            function set_pause(){
                if($('playbtn').hasClassName('play')){
                    Element.removeClassName($('playbtn'), 'play');
                    Element.addClassName($('playbtn'), 'pause');
                }
                else{
                    Element.removeClassName($('playbtn'), 'pause');
                    Element.addClassName($('playbtn'), 'play');
                }
            }
            function set_play(){
                    Element.removeClassName($('playbtn'), 'pause');
                    Element.removeClassName($('playbtn'), 'play');
                    Element.addClassName($('playbtn'), 'pause');
            }

            function reset_play(){
                var width = (document.body.clientWidth - 204) / 2;
                width = width < 0 ? 0 : width;
                Element.setStyle($('playbtn'), {marginLeft: width + "px"});
            }
            function init(){
                sliderInit();
                var swfVersionStr = "10.0.0";
                var xiSwfUrlStr = "playerProductInstall.swf";
                swfobject.embedSWF(
                "MusicPlayer.swf", "flashContent",
                "100%", "100%",
                swfVersionStr, xiSwfUrlStr
                );
            }

            function debug(s){
                console.log(s);
            }
            init();
            reset_play();
        </script>
    </body>
</html>
